这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

  • Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
  • 需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
  • 迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 ​

  • 正文已经按 「假设场景」、「示例实现」 等小节组织，阅读时可以先定位到当前问题对应的小节。
  • 保留了 1 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。

在子模块中想到调用另一个子模块时候可以使用提升访问级别的方法来提升

在 Vuex 中，如果你想让一个子模块调用另一个兄弟模块的 commit，可以通过在 commit 方法中设置 { root: true } 来访问根级别的 commit。这样，你可以提交根模块的 mutation，而根模块可以管理所有子模块的状态。

假设场景 ​

假设你有两个子模块 moduleA 和 moduleB，它们都在 Vuex 的根模块中注册。现在，你希望在 moduleA 中提交 moduleB 的一个 mutation。

示例实现 ​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const moduleA = {
  namespaced: true,
  state: {
    // moduleA 的状态
  },
  mutations: {
    // moduleA 的 mutations
  },
  actions: {
    actionA(context, payload) {
      // 调用 moduleB 的 mutationB
      context.commit('moduleB/mutationB', payload, { root: true });
    }
  }
};

const moduleB = {
  namespaced: true,
  state: {
    // moduleB 的状态
  },
  mutations: {
    mutationB(state, payload) {
      // 更新 moduleB 的状态
      console.log('moduleB 的 mutationB 被调用了', payload);
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
});

注意，你需在开启了命名空间后，所有调用这个当前的子模块都需要在前面添加到命名空间，不然就会找不到，如
xxx.dispatch('moduleA/actionA')
xxx.commit('moduleA/XXXXXX', [], { root: true })

实践检查清单 ​

  • 先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
  • 涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
  • 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。